<template>
	<view class="content">
		<view class="device-view" v->
			<view class="rowTitle">
				<view style="height: 50rpx;width: 10rpx;background-color: #007AFF;"></view>
				<text class="text">基本信息</text>
			</view>
			<view class="alarm-view-item">
				<uni-row class="rowContent">
					<uni-col :span="5">钓台名称：</uni-col>
					<uni-col :span="19">{{devname}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
				 	<uni-col :span="5" >设备编码：</uni-col>
				 	<uni-col :span="19">
						<text>{{devbm}}</text>
					</uni-col>
				</uni-row>
				 <uni-row class="rowContent">
				 	<uni-col :span="5" >设备位置：</uni-col>
				 	<uni-col :span="19">东平湖东北角</uni-col>
				 </uni-row>
			</view>
			 <view class="rowTitle">
			 	<view style="height: 50rpx;width: 10rpx;background-color: #007AFF;"></view>
			 	<text class="text">环境信息</text>
			 </view>
			 <view class="alarm-view-item">
				<uni-row class="rowContent">
					<image 	:span="5" class="image" src="../../static/icon/fishing/wendu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="5">温度：</uni-col>
					<uni-col :span="14">{{lotDataFormat("A_TEMP")}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<image :span="5" class="image" src="../../static/icon/fishing/shidu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="5">湿度：</uni-col>
					<uni-col :span="14">{{lotDataFormat("WS")}}</uni-col>
				</uni-row>				
				<uni-row class="rowContent">
					<image :span="5" class="image" src="../../static/icon/fishing/fengsu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="5">风速：</uni-col>
					<uni-col :span="14">{{lotDataFormat("A_HUMI")}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<image :span="5" class="image" src="../../static/icon/fishing/fengxiang.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="5">风向：</uni-col>
					<uni-col :span="14">{{lotDataFormat("WD")}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<image :span="5" class="image" src="../../static/icon/fishing/daqiya.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="5">气压：</uni-col>
					<uni-col :span="14">{{lotDataFormat("AP")}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<image :span="5" class="image" src="../../static/icon/fishing/guangzhaoqiandu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="5">光照强度：</uni-col>
					<uni-col :span="14">{{lotDataFormat("LUX")}}</uni-col>
				</uni-row>
			 </view>
			 <view class="rowTitle">
			 	<view style="height: 50rpx;width: 10rpx;background-color: #007AFF;"></view>
			 	<text class="text">水质信息</text>
			 </view>
			 <view class="alarm-view-item">
				 <uni-row class="rowContent">
				 	<image :span="5" class="image" src="../../static/icon/fishing/yelvsu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
				 	<uni-col :span="5">水温：</uni-col>
				 	<uni-col :span="14">{{lotDataFormat("WaterTemperature")}}</uni-col>
				 </uni-row>
			 	<uni-row class="rowContent">
			 		<image :span="5" class="image" src="../../static/icon/fishing/ph.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
			 		<uni-col :span="5">PH值：</uni-col>
			 		<uni-col :span="14">{{lotDataFormat("PH")}}</uni-col>
			 	</uni-row>
				<uni-row class="rowContent">
					<image :span="5" class="image" src="../../static/icon/fishing/yelvsu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="5">叶绿素：</uni-col>
					<uni-col :span="14">{{lotDataFormat("Chlorophyll")}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<image :span="5" class="image" src="../../static/icon/fishing/yangan.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
					<uni-col :span="6">溶解氧浓度：</uni-col>
					<uni-col :span="13">{{lotDataFormat("DissolvedOxygen")}}</uni-col>
				</uni-row>
			 </view>
			 <view class="rowTitle">
			 	<view style="height: 50rpx;width: 10rpx;background-color: #007AFF;"></view>
			 	<text class="text">钓台信息</text>
			 </view>
			 <view class="alarm-view-item">
			 	 <uni-row class="rowContent">
			 	 	<image 	:span="5" class="image" src="../../static/icon/fishing/zuoyouqingxiedu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
			 	 	<uni-col :span="5">左右倾斜：</uni-col>
			 	 	<uni-col :span="14">35.5℃</uni-col>
			 	 </uni-row>
			 	 <uni-row class="rowContent">
			 	 	<image 	:span="5" class="image" src="../../static/icon/fishing/shangxiaqingxiedu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
			 	 	<uni-col :span="5">上下倾斜：</uni-col>
			 	 	<uni-col :span="14">35.5℃</uni-col>
			 	 </uni-row>
			 	 <uni-row class="rowContent">
			 	 	<image 	:span="5" class="image" src="../../static/icon/fishing/dianya.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
			 	 	<uni-col :span="5">电压：</uni-col>
			 	 	<uni-col :span="14">24.6V</uni-col>
			 	 </uni-row>
			 	 <uni-row class="rowContent">
			 	 	<image 	:span="5" class="image" src="../../static/icon/fishing/dianliu.png" style="width: 23px;height: 23px;float: left;margin-right: 10px;"/>
			 	 	<uni-col :span="5">电流：</uni-col>
			 	 	<uni-col :span="14">2.3A</uni-col>
			 	 </uni-row>
			 </view>
		</view>
	</view>
</template>

<script>
	import { list as getList } from '../../api/iotNodeData.js'
	export default {
		data() {
			return {
				devbm: '',
				devname: '',
				form: {},
				lotData:[],
				productTypeDatas:[],
				responAlarmTaskList: [],
				queryForm:{
					imei:null,
					responUserId: uni.getStorageSync('userInfo').userId
				},
			}
		},
		onLoad(options) {
			this.devname = options.devname
			this.devbm = options.devbm
			this.getLotNode()
			this.$http.getDicts('PRODUCT_TYPE').then(res => {
				this.productTypeDatas = res.data
			})
		},
		onPullDownRefresh() {
			this.getDetail()	
			setTimeout(function () {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			onNavigationBarButtonTap(e) {
				let _this = this
				uni.showActionSheet({
					itemList: ['编辑', '删除'],
					success: function (res) {
						if(res.tapIndex == 0){
							uni.navigateTo({ url: '/pages/manholeCover/edit?id=' + _this.id })
						}else if(res.tapIndex == 1){
							uni.showModal({
								title: '提示',
								content: '确认删除此设备吗?',
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										del(_this.id).then(res => {
											uni.navigateBack()
										})
									}
								}
							})
						}
					},
					fail: function (res) {
						console.log(res.errMsg)
					}
				})	
			},
			getLotNode: function(deviceNo) {
				getList({
					pageNum:1,
					pageSize:99,
					nodeId:this.devbm,
				}).then(res => {
					if (res.code == 200) {
						this.lotData = res.rows
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取数据错误',
							duration: 2000
						})
					}
				})
			},
			loadAlarmList: function() {
				getAlarmTaskList(this.queryForm).then(res => {
					if (res.data.code == 200) {
						this.responAlarmTaskList = res.data.rows
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000
						})
						this.responAlarmTaskList = []
					}
				})
			},
			//指标数据格式化
			lotDataFormat(valueType) {
				var returnVal = '未采集'
				if(!this.lotData || this.lotData.length == 0){
					return returnVal
				}
				this.lotData.forEach(nodeData => {
					if(nodeData.valueType == valueType){
						returnVal = nodeData.value + ' ' + nodeData.unit
						return returnVal
					}
				})
				return returnVal
			},	
			//跳转处理页面
			goAlarm: function(id) {
				uni.navigateTo({ url: '/pages/alarmTask/alarmDetail?id=' + id })
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F2F6FF;
		padding-top: 16upx;
	}
	.rowTitle{
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 0rpx 20rpx;
		.text{
			font-size: 32rpx;
			color: #333333;
			margin-left: 20rpx;
		}
	}

	.device-view {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 96%;
		margin: auto;
		text-align: center;
		margin-bottom: 20px;
		.alarm-view-item {
			padding: 10px;
			background-color: #FFFFFF;
			width: 97%;
			height: auto;
			margin-left: 1.5%;
			margin-top: 10px;
			border-radius: 20rpx;
			font-size: 28upx;
			text-align: left;
			.rowContent{
				padding-bottom: 10rpx;
			}
			
			.alarm-view-item-t {
				display: flex;
				justify-content: space-between;
				padding-bottom: 5px;
				// border-bottom: 1px solid rgba($color: #409eff, $alpha: 0.5);
			}

			.alarm-view-item-c {
				.item-c-i-t {
					margin-top: 10px;
				}

				.item-c-bm-t {
					display: flex;
					margin-left: 15px;
					margin-bottom: 20px;
					justify-content: space-between;
					align-items: left;
					color: #333333;
					font-size: 28upx;
				}
			}
		}
	}
</style>
